iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 4
1
自我挑戰組

Hey! UIKit, 做個朋友吧~系列 第 4

Day 04: 你所不知道的UIButton的另一面......

  • 分享至 

  • xImage
  •  

其實好像也不是什麼多驚悚的秘密,只是UIButton還提供了一些小特效。
但我發現用的人好像不多,所以知道的人好像也不多,是因為不重要嗎?

Shadow Offset

shadow offset定義了title陰影的位移,需搭配陰影顏色。
CGSize的width為陰影的x軸位移量,向右為正;height為y軸位移量,向下為正。

newButton.setTitleShadowColor(.red, for: .normal)
newButton.titleLabel?.shadowOffset = CGSize(width: 5, height: 5)

如果將reversesTitleShadowWhenHighlighted設為true,則在按鈕狀態為highlighted時,shadow offset的位置會被上下左右翻轉(shadow offset的width及height乘上(-1))。

newButton.reversesTitleShadowWhenHighlighted = true

drawing

這個attribute提供了button一些特效,
其中showsTouchWhenHighlighted如果設定為true,則會在按鈕狀態highlighted時出現白色光點的特效(下圖左);
adjustImageWhenHighlighted為true則會在highlighted時反白按鈕(下圖右上),
而adjustImageWhenDisable若為true,則按鈕在disable的狀態下,圖片會變成半透明的(下圖右下)。

Line Break

line break決定了當title的內容超過按鈕邊界時的處理方式,屬於titleLable裡的方法,實作程式碼如下:

newButton.titleLabel?.lineBreakMode = NSLineBreakMode.byTruncatingMiddle

預設的處理方式為Truncating Middle,會只顯示頭尾,其他的處理方式如下:

從上面的programming可以看得出來,clip是把超出的部分截斷;wrap是換行,有依據character跟word換行2種;而truncate則是把部分文字用...省略,有省略前中後的文字3種。

Edge / Inset

edge inset決定了你的button內容的邊緣,也就是留白處,預設值為0。可以分別設定image、title或兩者同時(content)。

//阿寶和finn底部留40.0的edge
finnButton.contentEdgeInsets.bottom = 40.0

//jack左側留70的edge
jackButton.titleEdgeInsets.left = 70.0

Semantic

不知道大家有沒有發現,button的配置都是圖左字右,其實有個semanticContentAttribute的變數可以交換button裡image跟label的位置。
不過因為這麼變數是從UIView繼承來的,所以我也不知道,感謝大學長游諭~
讓我們將之前的老皮按鈕加上這行程式碼,就可以看到老皮的圖文位置交換了:

jackButton.semanticContentAttribute = UISemanticContentAttribute.forceRightToLeft


不過神奇的是,UISemanticContentAttribute裡還有一個foreLeftToRight,用下去就什麼事都沒有發生。
到底右換左OK,左換右就不OK是什麼概念?

UIButton的其他支援功能

Internationalization and Localization

身為一個App工程師,自己做的App怎麼能只甘於在一個地區上架呢?apple提供了Internationalization and Localization Guide,讓你的app推向國際!而button內的title(甚至是image)就是支援internationalization與localization的。

internationalization就是使app適合於不同語言及地區,具體作法大抵如下:

  • 使用base internationalization從storyboard及xib中分離需要國際化及在地化的內容。
  • 做好auto layout,讓你的UIKit可以在不同的語言下正常呈現。
  • 從code中分離需要國際化及在地化的內容。
  • 使用標準的API去降低不同地區的輸入系統及版本等的複雜度。
  • 處理資料時貼近使用者的設定?這我真的不懂
  • 如果有支援從要到左書寫的語言,記得要鏡像使用者介面喔!

而localization就是將你國際化了的app翻譯成不同的語言:

  • 鎖定你的使用者介面。
  • 將app送給專業的在地化團隊翻譯吧!
  • 確認翻譯內容的正確性。
  • 將在地化的結果import進你的app並確認畫面。
  • 完成其他的在地化程序。

最後進行測試:

  • 在地化前使用pseudolanguages測試app。
  • 預審localization。
  • 執行app看看有什麼沒在地化的地方。
  • 模擬不同的語言及地區執行app。
  • 給在地的使用者測試測試吧~

至於詳細的做法,我也沒有細看,而且再講下去好像就有點偏離主題了。
有興趣的人可以參考這份文件:
Internationalization and Localization Guide

Accessibility

apple為了使障礙者也能使用產品,在Mac OS X v10.4之後加入了VoiceOver這個軟體來輔助障礙者,而UIButton也支援這個功能。
當你的VoiceOver是被允許運作的時候,每點擊一次按鈕,語音就會回饋title、特性、以及相關說明給使用者。
例如點擊camera裡的option button時,VoiceOver會回饋"Options. Button. Shows additional camera options."給使用者。是不是很貼心呢~

那UIButton就介紹到這邊啦~看來我又更熟悉UIButton一點了呢
下一回開始要來認識UIDatePicker。

順帶一提,button範例裡的阿寶老皮圖片是我在google抓的,忘記註明出處了。
沒錯我就是活寶粉,我愛阿寶~~❤️(阿寶表示驚悚)


上一篇
Day 03: 利用UIButton的State來實作點擊後的按鈕變化吧~
下一篇
Day 05: 跟我約會吧~UIDatePicker
系列文
Hey! UIKit, 做個朋友吧~30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
ytyubox
iT邦新手 5 級 ‧ 2019-09-19 12:12:01

很用心的文章, 收藏!

我要留言

立即登入留言